<template>
  <a-drawer
    :width="1200"
    :footer="false"
    :visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    ok-text="确认"
  >
    <template #title> 入库详情</template>
    <div>
      <div class="info-item">
        <!-- <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>基本信息</h3>
          </a-space>
        </div> -->
        <TitleBox title="基本信息"></TitleBox>
        <div style="margin-left: 10%"
          ><a-form :model="form" auto-label-width>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="入库单号:"
                  ><a-input disabled v-model="form.number" style="width: 320px"
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="posts.post2" label="收货单号：">
                  <a-input
                    disabled
                    v-model="form.entryWarehouseNumber"
                    style="width: 320px"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="posts.post2" label="供应商编码:"
                  ><a-input
                    style="width: 320px"
                    v-model="form.supplierNumber"
                    allow-clear
                    disabled
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="posts.post2" label="供应商名称："
                  ><a-input
                    :style="{ width: '320px' }"
                    v-model="form.supplierName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="posts.post2" label="收货员：">
                  <a-input
                    v-model="form.entryStaffName"
                    :style="{ width: '320px' }"
                    disabled
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="posts.post2" label="质检员：">
                  <a-input
                    v-model="form.inspectionStaffName"
                    :style="{ width: '320px' }"
                    disabled
                    allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="posts.post2" label="到货日期：">
                  <a-date-picker
                    disabled
                    showTime
                    defaultValue="2019-06-03 08:00:00"
                    v-model="form.entryDate"
                    :style="style"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <TitleBox title="物料入库明细"></TitleBox>
        <div
          style="
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
            border-radius: 4px;
          "
        >
          <div style="padding: 30px">
            <div style="text-align: right" class="button-item"></div
            ><tableTurn
              style="margin-top: 10px"
              :table-data="getProduct"
              ref="tableRef"
              :pagination="false"
            >
              <a-table-column :width="80" align="center">
                <template #title> 序号 </template>
                <template #cell="{ rowIndex }">
                  <div style="position: relative">
                    <div>{{ rowIndex + 1 }}</div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                align="center"
                :width="100"
                title="优先级"
                data-index="productNumber"
              >
                <template #cell="{ record }">
                  <a-typography-text
                    v-if="record.level === 1"
                    style="color: #999999"
                  >
                    低
                  </a-typography-text>
                  <a-typography-text v-if="record.level === 2" type="primary">
                    中
                  </a-typography-text>

                  <a-typography-text v-if="record.level === 3" type="warning">
                    高
                  </a-typography-text>
                  <a-typography-text v-if="record.level === 4" type="danger">
                    紧急
                  </a-typography-text>
                </template>
              </a-table-column>
              <a-table-column
                align="center"
                :width="100"
                title="物料编码"
                data-index="productNumber"
              >
              </a-table-column>
              <a-table-column
                align="center"
                :width="100"
                title="物料名称"
                data-index="productName"
              >
              </a-table-column>

              <a-table-column
                align="center"
                :width="100"
                title="规格型号"
                data-index="spec"
              >
              </a-table-column>
              <!-- <a-table-column
                align="center"
                title="基本单位"
                data-index="unitName"
                :width="100"
              >
              </a-table-column> -->

              <a-table-column
                align="center"
                :width="100"
                title="本次入库数量"
                data-index="amount"
              >
              </a-table-column> </tableTurn
          ></div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetRouters } from '@/api/menu';
  import {
    postGrounding,
    getStorageOne,
  } from '@/api/inventory-management/warehousing-management/purchase-receipt/index';
  import { cloneDeep } from 'lodash';
  // import { cloneDeep } f rom 'lodash';

  const tableRef = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
      receiptId: number;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible', 'addRoleEmit']);

  const form = ref<any>({});

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const getData = async () => {
    const res = await getStorageOne({ id: props.receiptId });
    form.value = res;
    tableRef.value.loadData();
  };

  // 确定
  const handleOk = async () => {
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const getProduct = async () => {
    try {
      const data = await cloneDeep(form.value.storageWarehouseItem);
      return Promise.resolve(data ? data : []);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  watchEffect(() => {
    if (modalVisible.value) {
      getData();
    }
    // if (form.value.purchaseOrderProduct) {
    //   tableRef.value.loadData();
    // }
  });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
  :deep(.arco-input-wrapper),
  :deep(.arco-input[disabled]) {
    -webkit-text-fill-color: black;
  }
</style>
